<template>
  <div class="imgarea">
    <img
      src="@/assets/router.png"
      class="select-device-img"
      :id="id"
      v-if="type == 0 && group == 0"
    />
    <img
      src="@/assets/router2.png"
      class="select-device-img"
      :id="id"
      v-if="type == 1 && group == 0"
    />
    <img
      src="@/assets/washer.png"
      class="select-device-img"
      :id="id"
      v-if="type == 0 && group == 1"
    />
    <img
      src="@/assets/door_stop.png"
      class="select-device-img"
      :id="id"
      v-if="type == 1 && group == 1"
    />
    <img
      src="@/assets/volume.png"
      class="select-device-img"
      :id="id"
      v-if="type == 2 && group == 1"
    />
    <img
      src="@/assets/computer.png"
      class="select-device-img"
      :id="id"
      v-if="type == 0 && group == 2"
    />
    <img
      src="@/assets/line.png"
      class="select-device-img"
      :id="id"
      v-if="type == 0 && group == 3"
    />
  </div>
</template>

<script>
export default {
  name: "DeviceImage",
  props: {
    group: Number,
    type: Number,
    id: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.select-device-img {
  height: 50px;
}
</style>
